<template>
  <div class="departments">
    <el-card class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="6"><h4>江苏传智播客教育科技股份有限公司</h4></el-col>
            <el-col :span="6" style="text-align: right">
              <span class="leader">负责人</span>
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <!-- 添加顶级节点 -->
                    <el-button
                      type="text"
                      @click="dialogFormVisible = true"
                    >添加子部门</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <!-- 分割线 -->
          <el-divider />
          <!-- tree -->
          <!-- departs里的数据 -->
          <el-tree
            :data="departs"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
            <!-- 使用插槽自定义结构  -->
            <template #default="{ data }">
              <!-- tree本身就有flex，所以这里el-row的宽度是由内容撑开，记得给flex=1 -->
              <el-row type="flex" class="tree-row" justify="space-between">
                <el-col :span="6">{{ data.name }}</el-col>
                <el-col :span="6" style="text-align: right">
                  <span class="leader">{{ data.manager }}</span>
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <!-- 下拉菜单 -->
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item><el-button
                        type="text"
                        @click="addChild(data)"
                      >添加子部门</el-button></el-dropdown-item>
                      <el-dropdown-item><el-button
                        type="text"
                        @click="enterEdit(data)"
                      >查看部门</el-button></el-dropdown-item>
                      <el-dropdown-item><el-button
                        type="text"
                        @click="enterDel(data)"
                      >删除部门</el-button></el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown></el-col>
              </el-row>
            </template>
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹出对话框 -->
    <dep-dialog
      :visible="dialogFormVisible"
      :form="form"
      @update:visible="dialogFormVisible = $event"
      @getData="getData"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import {
  getDepartments,
  getDepartmentById,
  delDepartmentById
} from '@/api/departments'

// 导入弹框组件
import DepDialog from './components/DepDialog.vue'
export default {
  name: 'Departments',
  components: { DepDialog },
  data() {
    return {
      activeName: 'first',
      departs: [], // tree的数据
      // tree里默认的 节点标签为节点对象的某个属性值，子树为节点对象的某个属性值
      defaultProps: {
        children: 'children',
        label: 'name'
      },

      // 表单数据
      form: {
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '', // 部门介绍
        name: '', // 部门名称
        pid: '' // 父级部门id
      },

      // 是否显示弹出框
      dialogFormVisible: false
    }
  },

  created() {
    this.getData()
  },
  methods: {
    // 获取tree数据的方法
    async getData() {
      // 获取部门列表
      const res = await getDepartments()
      // console.log(res)
      // 去掉pid为1
      const res1 = res.depts.filter((v) => v.pid !== '-1')
      // console.log('res1:', res1)
      // 找到顶级节点
      const root = res1.filter((v) => v.pid === '')
      // console.log('root:', root)
      // 找到后代
      root.forEach((v) => {
        v.children = res1.filter((vc) => vc.pid === v.id)
      })
      // 把处理好的数据渲染到页面
      this.departs = root
    },

    // 清空表单
    onCancel() {
      this.form = {
        code: '', // 部门编码
        manager: '', // 部门负责人
        introduce: '', // 部门介绍
        name: '', // 部门名称
        pid: '' // 父级部门id
      }
      this.dialogFormVisible = false
    },
    // 增加子部门
    addChild(data) {
      // console.log(data)
      this.form.pid = data.id
      this.dialogFormVisible = true
    },

    handleNodeClick(data) {
      console.log(data)
    },

    // 进入编辑
    async enterEdit(data) {
      this.dialogFormVisible = true
      // console.log('data', data)
      const res = await getDepartmentById(data.id)
      // console.log('res', res)
      this.form = res
    },
    // 删除部门
    enterDel(data) {
      this.$confirm('确定删除', '删除部门', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await delDepartmentById(data.id)
        // console.log('res', res)
        this.getData()
        this.$message({
          type: 'success',
          message: '删除部门成功!'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  ::v-deep.el-tabs__content {
    padding-left: 50px;

    h4 {
      margin: 0;
    }
    .leader {
      font-size: 14px;
      margin-right: 10px;
    }
  }
  .tree-row {
    flex: 1;
  }
}
</style>
